<template>
  <div id="container">
    <div class="videoList">
      <chartTitle :title="title"></chartTitle>
      <div class="btnBox">
        <!-- <p class="btn btn1" @click="onPrev"></p>
        <p class="btn btn2" @click="onNext"></p> -->
        <p class="btn btn3" @click="onMore">更多></p>
      </div>
      <div class="carouselBox">
        <a-carousel arrows>
          <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: -18px; zindex: 1">
            <a-icon type="left" />
          </div>
          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 5px">
            <a-icon type="right" />
          </div>
          <div v-for="(item, key) in imgArr" :key="key">
            <div v-for="(item2, key) in item.imgs" :key="key" class="hotBox">
              <img :src="item2.src" style="cursor: pointer" @click="onGunClick(item2.videoUrl)" />
            </div>
          </div>
        </a-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'itemBox',
  props: {
    title: String,
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      imgArr: [
        {
          imgs: [
            {
              src: 'https://www.baidu.com/img/bd_logo1.png',
              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png',
              videoUrl: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png',
              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png',
              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png',
              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png',
              videoUrl: 'http://vjs.zencdn.net/v/oceans.mp4'
            }
          ]
        },
        {
          imgs: [
            {
              src: 'https://www.baidu.com/img/bd_logo1.png'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png'
            },
            {
              src: 'https://www.baidu.com/img/bd_logo1.png'
            }
          ]
        }
      ]
    }
  },

  mounted() {
    this.onInit()
  },

  methods: {
    onInit() {},
    onPrev() {},
    onNext() {},
    onMore() {},
    onGunClick(url) {
      // this.$refs.videoPlayerId.setVideoUrl(url)
    }
  }
}
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 20.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  position: relative;
  .videoList {
    margin-top: 2vh;
    width: 100%;
    height: 80vh;
    padding: 1.5vh 3vh;
    background-image: url(../../image/index/listBg.png);
    background-size: 100% 100%;
    .btnBox {
      position: absolute;
      right: 2vh;
      top: 1vh;
      display: flex;
      .btn1 {
        width: 4vh;
        height: 4vh;
        cursor: pointer;
        background-image: url(../../image/index/prev.png);
        background-size: 100% 100%;
      }
      .btn2 {
        width: 4vh;
        height: 4vh;
        cursor: pointer;
        background-image: url(../../image/index/next.png);
        background-size: 100% 100%;
      }
      .btn3 {
        font-size: 1.5vh;
        cursor: pointer;
        padding: 1vh 2vh;
        background-image: url(../../image/index/btnBg.png);
        background-size: 100% 100%;
      }
    }
    .carouselBox {
      position: relative;
      margin-top: 1vh;
      width: 100%;
      // height: 20vh;
    }
    .carouselBox .ant-carousel .slick-slide {
      height: 300px;
      overflow: hidden;
      background: #fff;
    }
    /deep/ .slick-dots-bottom {
      display: none !important;
    }
    .carouselBox .ant-carousel .slick-slide .hotBox {
      width: 47.8%;
      height: 22.4vh;
      float: left;
      margin-left: 1.5%;
      margin-top: 1.5%;
    }
    .carouselBox .ant-carousel .slick-slide .hotBox img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    .carouselBox .ant-carousel .custom-slick-arrow {
      width: 25px;
      height: 25px;
      font-size: 25px;
      color: #000;
      // background-color: rgba(31, 61, 35, 0.11);
      opacity: 0.5;
      &.slick-prev {
        left: 37vw !important;
        // right: 2%!important;
        top: -4.3% !important;
        width: 4vh;
        height: 4vh;
        opacity: 1 !important;
        cursor: pointer;
        background-image: url(../../image/index/prev.png);
        background-size: 100% 100%;
      }
      &.slick-next {
        left: 39vw !important;
        // right: 2%!important;
        top: -4.3% !important;
        width: 4vh;
        height: 4vh;
        opacity: 1 !important;
        cursor: pointer;
        background-image: url(../../image/index/next.png);
        background-size: 100% 100%;
      }
      .anticon {
        color: #fff;
        display: none;
      }
    }
    .carouselBox .ant-carousel .custom-slick-arrow:before {
      display: none;
    }
    .carouselBox .ant-carousel .custom-slick-arrow:hover {
      opacity: 0.7;
    }
  }
}
</style>
